import './card.css'

export default function Card ({ name, children, rightExtraContent }) {
    return (
        <div className="rounded-md w-full h-full">
            <div className="p-3 border-b border-gray-300 border-solid flex justify-between">
                <div>
                    <span className="text-base">
                        {name}
                    </span>
                </div>
                <div>
                    {rightExtraContent}
                </div>
            </div>
            <div className='p-3 w-full overflow-y-auto card-content' style={{ height: 'calc(100% - 49px)' }}>
                {children}
            </div>
        </div>
    )
}